<template>
    <div class="photoList-box">
        <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll">
                <a class="mui-control-item mui-active" @click="getImg(0)">
                    全部
                </a>
                <a class="mui-control-item" v-for="items in getList" :key='items.id' @click="getImg(items.id)">
                    {{items.title}}
                </a>
            </div>
        </div>

        <!-- 图片懒加载 mint-ui中的lazy-load-->
        <ul class="pl_imgLazy">
            <router-link :to="'/photo/photoInfo/'+item.id" tag="li" v-for="item in getImgData" :key='item.id'>
              <img v-lazy="item.img_url">
              <div class="pl_content">
                    <h5>{{item.title}}</h5>
                    <div v-html="item.content"></div>
              </div>
            </router-link>
        </ul>

    </div>
</template>
<script>
import mui from '../../../node_modules/mui/js/mui'

export default {
    mounted() { 
        mui('.mui-scroll-wrapper').scroll({
            deceleration:0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        })
    },
    created() {
        this.getPhotoList(),
        this.getImg(0)  //此处在全部页面需要自己渲染出来
    },
    data(){
        return{
            getList:[],
            getImgData:[]
        }
    },
    methods: {
        /* 获取滑动栏的标题 */
        getPhotoList(){
            this.$http.get('api/getimgcategory').then(res=>{
                // console.log(res)
                if(res.body.status===0){
                    this.getList=res.body.message;
                }
            })
        },
        /* 获取图片列表数据 */
        getImg(id){
            this.$http.get('api/getimages/'+id).then(res=>{
                // console.log(res);
                if(res.body.status==0){
                    this.getImgData=res.body.message;
                }
            })
        }
    },
}
</script>
<style lang='scss'>
    .photoList-box{
        touch-action:pan-y;

       
        .pl_imgLazy{
            padding: 0;
            margin: 0;
            list-style: none;
            padding: 0 4px;

            li{
                position: relative;
                box-shadow: 0px 0px 3px black ;
                text-align: center;
                // background-color: #ccc;
                img[lazy=loading] {
                    width: 40px;
                    height: 300px;
                    margin: auto;
                }
                img{
                    width: 100%;
                    margin-bottom: 5px;
                }
                .pl_content{
                position: absolute;
                left: 0;
                bottom: 8px;
                background:rgba(0,0,0,.5);
                color: aliceblue;
                font-size: 14px;
                max-height: 100px;
                }
            }
            
        }
    }
</style>

